<!--
 * @Description: 项目管理-查看项目
 * @Author gong
 * @create 2024/9/4 13:51
 -->
<!--setup-->
<script setup lang="jsx">
import { onMounted, getCurrentInstance, reactive, ref, provide } from 'vue'
import BaseSkeleton from '@shared/base/base-skeleton' // 骨架屏
import TabHeader from '../tab-header' // 头部tab组件
import BasicInfo from './basic-info' // 基础信息
import ProjectAuth from './project-auth' // 项目权限
import useRouterPlus from '@/router/use-router-plus'
import { ElMessage } from 'element-plus'
import { to } from 'sf-utils2'
import prjInfoApi from '@/api/modules/prj-info'

const { proxy } = getCurrentInstance()
const props = defineProps({})
const emit = defineEmits([])
const { router, route } = useRouterPlus()

/* 状态 */
const initial = ref(false) // 是否初始化结束
const projBaseInfo = ref({ id: route.query.id }) // 页面详情数据
const tabValue = ref('1')
const tabList = reactive([
  { name: '1', label: '基础信息' },
  { name: '2', label: '项目权限' }
])

provide('__projBaseInfo__', projBaseInfo)

/* 方法 */
/**
 * 获取详情数据
 */
const getInfo = async () => {
  const [res, err] = await to(prjInfoApi.getPrjInfoDetail({ id: route.query?.id }))
  if (err || res?.code !== 200) return ElMessage.error(res?.message || String(err))
  projBaseInfo.value = res.data || {}
  initial.value = true
}
/**
 * 删除
 */
/* const onDelete = () => {
  let label = <span style="color:#2D49D1">{projBaseInfo.value.prjName}</span>
  let title = <div>确定删除 {label}？项目数据删除后不可恢复，请谨慎操作。</div>
  ElMessageBox.confirm(title, '删除项目', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const params = {
      id: projBaseInfo.value?.id,
      updateTime: projBaseInfo.value?.updateTime // 更新时间
    }
    const [res, err] = await to(prjInfoApi.removePrjInfoById(params))
    if (err || res?.code !== 200) return ElMessage.error(res?.message || String(err))
    ElMessage.success(res?.message || '删除成功')
    // 关闭返回页面并刷新
    router.closeTab(undefined, { autoJump: false })
    router.push({ path: '/project/approval', refresh: true })
  })
} */

/**
 * 编辑
 */
const onEdit = () => {
  router.push({
    title: '编辑项目',
    path: '/project/approval/edit',
    query: {
      id: route.query.id
    }
  })
  // 关闭详情页，避免页面缓存不更新数据
  router.closeTab(undefined, { autoJump: false })
}

/* 计算 */

/* 监听 */

/* 周期 */
onMounted(() => {
  getInfo()
})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <div class="page flex h-page flex-1 flex-col">
    <!-- 内容区 -->
    <BaseSkeleton :initial="initial">
      <TabHeader
        v-model="tabValue"
        :title="projBaseInfo.prjName"
        :tab-data="tabList"
        class="tab-header"
      >
        <template #buttons>
          <!--          <el-button @click="onDelete">
            删除
          </el-button>-->
          <el-button
            type="primary"
            @click="onEdit"
          >
            编辑
          </el-button>
        </template>
      </TabHeader>
      <div
        v-if="tabValue === '1'"
        class="flex-1"
      >
        <!--   基础信息   -->
        <BasicInfo class="h-full" />
      </div>
      <div
        v-else
        class="flex flex-1 flex-col"
      >
        <!--   项目权限   -->
        <ProjectAuth
          :project-info="projBaseInfo"
          class="flex-1"
        />
      </div>
    </BaseSkeleton>
  </div>
</template>

<!--style-->
<style scoped lang="less">
.page {
  width: 100%;
  //height: 100%;

  .tab-header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
}
</style>
